<!--
* name: API服务统计页
* author: zyj
* date: 2021.9.17
-->
<template>
    <div class="user-warp item-warp">
        <div class="item-title">
            <h2>API服务统计</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_arrow.png">
            </a>
        </div>
        <div class="api-content">
            <div class="cont-item">
                <div class="cont-text">
                    <h3>应用个数</h3>
                    <h1>{{appTotal}}</h1>
                </div>
                <div class="api-line">
                    <echarts-line :data="lineData" v-if="lineData.lineY.length>0"></echarts-line>
                </div>
            </div>
            <div class="cont-item">
                <div class="cont-text">
                    <h3>API服务总次数</h3>
                    <h1>{{apiTotal}}</h1>
                </div>
                <div class="api-total">
                    <div class="api-radar">
                        <echarts-radar :data="radarData" :maxData="maxData"></echarts-radar>
                    </div>
                    <div class="api-toolip">
                        <div class="api-census">API服务统计</div>
                        <div v-if="this.radarData.length > 0 && this.maxData.length > 0">
                            <div class="api-proportion model">
                                <div>产品模型</div>
                                <div>{{this.radarData ? ((this.radarData[0]/this.max)*100).toFixed(0) : 0}}%</div>
                            </div>
                            <div class="api-proportion">
                                <div>设备管理</div>
                                <div>{{this.radarData ? ((this.radarData[1]/this.max)*100).toFixed(0) : 0}}%</div>
                            </div>
                            <div class="api-proportion">
                                <div>执行命令</div>
                                <div>{{this.radarData ? ((this.radarData[2]/this.max)*100).toFixed(0) : 0}}%</div>
                            </div>
                            <div class="api-proportion">
                                <div>存储</div>
                                <div>{{this.radarData ? ((this.radarData[3]/this.max)*100).toFixed(0) : 0}}%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import EchartsLine from '@/components/Echarts/EchartsLine/apiCount';
import EchartsRadar from '@/components/Echarts/EchartsRadar';
import {getApiData} from "@/api/apiList";

 export default {
    name: "userAnalysis",
    components: {EchartsLine, EchartsRadar},
    data: () => ({
        lineData: { // 折线图，
            lineX: [],
            lineY: [],
            position: [30, 40, 20, 50],
            title: 'API服务次数'
        },
        maxData: [  //雷达图最大值
            {name: '产品模型', max: 0},
            {name: '设备管理', max: 0},
            {name: '执行命令', max: 0},
            {name: '存储', max: 0},
        ],
        //雷达图数值
        radarData: [],
        appTotal: '',
        apiTotal: '',
        max: 0,
    }),
    methods: {
        /**
         * API服务统计数据
         */
        getApiData() {
            getApiData({}).then(res => {
                res = res.data;
                console.log('API服务统计数据', res);
                this.appTotal = res.appTotal;
                this.apiTotal = res.apiCallTimesTotal.apiCallTimesTotal;
                res.apiCallTimesDaily.map(item => {
                    let statTime = item.statTime;
                    let index = statTime.indexOf("-")
                    statTime = statTime.substring(index + 1, statTime.length);
                    this.lineData.lineX.push(statTime);
                    this.lineData.lineY.push(item.num);
                });

                /**
                 *
                 * 这里是雷达图相关的接口数据
                 * */
                this.max = Number(res.apiCallTimesTotal.apiCallTimesCommand) + Number(res.apiCallTimesTotal.apiCallTimesDevice) + Number(res.apiCallTimesTotal.apiCallTimesProduct) + Number(res.apiCallTimesTotal.apiCallTimesStorage);
                let maxApi = this.maxData
                maxApi.forEach(item => {
                    item.max = this.max
                })
                this.maxData = maxApi;
                this.radarData[0] = Number(res.apiCallTimesTotal.apiCallTimesProduct)
                this.radarData[1] = Number(res.apiCallTimesTotal.apiCallTimesDevice)
                this.radarData[2] = Number(res.apiCallTimesTotal.apiCallTimesCommand)
                this.radarData[3] = Number(res.apiCallTimesTotal.apiCallTimesStorage)
            });
        },
    },
     created() {
         this.getApiData();
     }
}
</script>

<style scoped type="text/less" lang="less">
.user-warp {
    margin-top: 14px;
    height: 27vh;
    background-image: url("../../assets/img/bg/bg_k03.png");
    background-size: 100% 100%;

    .api-content {
        display: flex;
        width: 100%;

        .cont-item {
            position: relative;
            width: 50%;
            height: 24vh;

            .cont-text {
                text-align: center;
                font-family: Source Han Sans CN;
                h3 {
                    font-size: 15px;
                    color: #4EB2F2;
                }
                h1 {
                    font-size: 24px;
                    margin-top: 8px;
                    font-weight: bold;
                    color: #4EB2F2;
                }
            }

            //&:last-child {
            //    margin-left: auto;
            //}

            .api-line {
                width: 100%;
                //position: absolute;
                //bottom: 20px;
                //left: 0;
                //margin: 0 auto;
                //width: 190px;
                height: 200px;
            }

            .api-total {
                width: 100%;
                height: 200px;
                display: flex;
                justify-content: space-between;
                .api-radar {
                    margin-top: 10px;
                    width: 70%;
                    height: 200px;
                    z-index: 111;
                }
                .api-toolip {
                    width: 30%;
                    height: 170px;
                    background: #161F75;
                    border: 1px solid #0B3789;
                    padding: 17px 15px 13px;
                    .api-census {
                        text-align: center;
                        font-size: 12px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        color: #4EB2F2;
                    }
                    .api-proportion {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 10px;
                        font-family: Source Han Sans CN;
                        font-weight: 400;
                        font-size: 12px;
                        div:first-child {
                            color: #4EB2F2;
                        }
                        div:last-child {
                            color: #FFC600;
                        }
                    }
                    .model {
                        margin-top: 15px;
                    }
                }
            }
        }
    }
}
</style>
